<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>combogrid</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>

    <select id="cg" style="width: 300px;" >

    </select>

    <script>
        $('#cg').combogrid({
                title: "图书列表",
                url: "/pages/datagrid/book_list.json",
                method: "get",
                panelWidth:700,
                pagination:true, //显示分页栏
                pageNumber:1,
                idField:'id',  
                textField:'name', //选择行的时候把数据放到下拉框文本中
                rownumbers: true,
                pageSize:5,
                pageList:[5,10,15,20,30],
                singleSelect:true,
                columns:[[
                    {field:'id',title:'ID',width:50,align:'center'},
                    {field:'name',title:'书名',width:250},
                    {
                        field:'cover',title:'图片',width:150,
                        formatter:function(value,row,index){
                            return '<img src="'+value+'" width="150" height="150" />';
                        }
                    },
                    {field:'publishDate',title:'出版日期',width:100},
                    {field:'price',title:'价格',width:100},
                    {field:'category',title:'分类',width:100,formatter:function(value,row,index){
                        return row.category.name;
                    }}
                ]],
        });
    </script>
</body>
</html>